<meta name="viewpoint" content="width=device-width,initial-scale=1.0" charset="UTF-8">
<link href="../css/bootstrap.min.css" rel="stylesheet"/>
<link href="../css/bootstrap-table.min.css" rel="stylesheet"/>
<link href="../css/main.css" rel="stylesheet"/>
<script src="../js/jquery-1.9.1.js"></script>
<!-- bootstrap table使用注意事项，数据用url加载，field要写在标签里，否则没用 -->
<div id="reportTableDiv" class="well" style="border:3px solid #337ab7;background-color:#eee">
	<table id="examInfoTable" data-toolbar="#myToolbar" data-classes="table table-no-bordered">
		<thead>
		 	<tr>
		 		<th data-field="state" data-checkbox=true></th>
		 		<th data-align="center"data-valign="middle" data-sortable=true data-field="eid">编号</th>
		 		<th data-formatter="formatPic" data-align="center"data-valign="middle" data-sortable=true data-field="epic">图片</th>
		 		<th data-align="center"data-valign="middle" data-sortable=true data-field="ename" >考试名称</th>
		 		<th data-align="center"data-valign="middle" data-sortable=true data-field="estart">开考时间</th>
		 		<th data-align="center"data-valign="middle" data-sortable=true data-field="eend">结束时间</th>
		 		<th data-formatter="formatMax" data-align="center"data-valign="middle" data-sortable=true data-field="emaxnum">最大人数</th>
		 		<th data-align="center"data-valign="middle" data-sortable=true data-field="ecurrnum">已预约人数</th>
		 		<th data-formatter="formatStatus" data-align="center"data-valign="middle" data-sortable=true data-field="outofdate">是否过期</th>
		 	</tr>
		</thead>
	</table>
</div>
<div id="myToolbar" class="btn-toolbar">
	<div class="btn-group">
		<button id="import" type="button" class="btn btn-primary btn-lg">导入</button>
	</div>
	<div class="btn-group">
		<input id="excel" name="excel" type="file" class="input-lg" style="border:3px solid #337ab7;background-color:white">
	</div>
	<div class="btn-group">
		<button id="add" type="button" data-toggle="modal" data-target="#add_modal" class="btn btn-primary btn-md">添加 <span class="glyphicon glyphicon-plus"></span></button>
	</div>
	<div class="btn-group">
		<button id="remove" onclick="delExam()" type="button" class="btn btn-primary btn-md">删除 <span class="glyphicon glyphicon-remove"></span></button>
	</div>
	<div class="btn-group">
		<button id="edit" onclick="editExam()" type="button" class="btn btn-primary btn-md">编辑 <span class="glyphicon glyphicon-edit"></span></button>
	</div>
</div>	
<!-- 添加模态框 -->
<div class="modal fade" id="add_modal" data-keyboard="false">
	<div class="modal-dialog">
		<div class="modal-content" >
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h3 class="modal-title" style="text-align:center"><label for="examName">添加考试科目</label></h3>
			</div>
			<div class="modal-body">
				<form id="examform" class="form-inline">
					<div class="form-group">
					</div>
					<div class="form-group">
						<label for="epic1" class="col-md-2 control-label">图片</label>
						<div class="col-md-10">
							<div id="showpic" style="width:100px;height:100px"></div>
							<input type="file" name="epic1" id="epic1" multiple="multiple" onchange="previewMultipleImage(this,'showpic')" />
						</div>
					</div>
					<div class="form-group">
						<label for="ename" class="col-md-2 control-label">考试名称</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="ename" id="ename">
						</div>
					</div>
					<div class="form-group">
						<label for="estart" class="col-md-2 control-label">开考时间</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="estart" id="estart">
						</div>
					</div>
					<div class="form-group">
						<label for="eend" class="col-md-2 control-label">结束时间</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="eend" id="eend">
						</div>
					</div>
					<div class="form-group">
						<label for="emaxnum" class="col-md-2 control-label">最大人数</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="emaxnum" id="emaxnum">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-body">
				<button id="add_exam"  onclick="addExam()" type="button" class="btn btn-primary btn-block">添加</button>
			</div>
		</div>
	</div>	
</div>
<!-- 修改模态框 -->
<div class="modal fade" id="edit_modal" data-keyboard="false">
	<div class="modal-dialog">
		<div class="modal-content" >
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h3 class="modal-title" style="text-align:center"><label for="examName2">修改考试科目</label></h3>
			</div>
			<div class="modal-body">
				<form id="examform2" class="form-inline">
					<div class="form-group">
					</div>
					<div class="form-group">
						<label for="epic2" class="col-md-2 control-label">图片</label>
						<div class="col-md-10">
							<div id="showpic2" style="width:100px;height:100px"></div>
							<input type="file" name="epic2" id="epic2" multiple="multiple" onchange="previewMultipleImage(this,'showpic2')" />
						</div>
					</div>
					<div class="form-group">
						<label for="ename2" class="col-md-2 control-label">考试名称</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="ename2" id="ename2">
						</div>
					</div>
					<div class="form-group">
						<label for="estart2" class="col-md-2 control-label">开考时间</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="estart2" id="estart2">
						</div>
					</div>
					<div class="form-group">
						<label for="eend2" class="col-md-2 control-label">结束时间</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="eend2" id="eend2">
						</div>
					</div>
					<div class="form-group">
						<label for="emaxnum2" class="col-md-2 control-label">最大人数</label>
						<div class="col-md-10">
							<input type="text" class="form-control input-lg" name="emaxnum2" id="emaxnum2">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-body">
				<button id="edit_exam"  onclick="confirmEdit()" type="button" class="btn btn-primary btn-block">修改</button>
			</div>
		</div>
	</div>	
</div>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/bootstrap-table-editable.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/ajaxfileupload.js"></script>
<script src="../js/showpic.js"></script>

<script type="text/javascript">
	$(function(){
		$('#examInfoTable').bootstrapTable({
			//colomns:columns, 
			
			url: "/examination.action?op=all",
					
			paginationLoop: false,		
			checkboxHeader: true,
			undefinedText: "未填",
			
			cache: false,
			height: 480,
			striped: true,
			pagination: true,
			pageSize: 20,
			pageNumber:1,
			pageList: [10, 20, 50, 100, 200, 500],
			search: true,
			showRefresh: true,
			showToggle: true,
			clickToSelect: true,
			sidePagination: "client",
			
			
			formatNoMatches: function(){
	         	return '无符合条件的记录';
	        }
		});
		
		$("#import").click(function(){	
			if($("#excel").val()==""){
				return;
			}
			
			$.ajaxFileUpload({
				url:"/import.action?op=importExamInfo",
				secureuri:false,
				type: "POST",
				fileElementId:"excel",
				dataType:"json",
				success:function(data,status){
					data = $.trim(data);
					if(data=="0"){
						alert("导入失败，格式有误");
					}else{
						alert("导入成功");
						$("#examInfoTable").bootstrapTable('refresh', {url: '../examination.action?op=all'});
					}
				},
				error:function(data,status,e){
					alert("请勿上传重复信息!");
				}
			});
		});
		
	});
	
	function addExam(){
		var ename = $("#ename").val();
		var estart = $("#estart").val();
		var eend = $("#eend").val();
		var emaxnum = $("#emaxnum").val();
		data={ename:ename,estart:estart,eend:eend,emaxnum:emaxnum};
 		
 		$.ajaxFileUpload({
 			url:"/addExam.action",
 			secureuri:false,
 			fileElementId:"epic1",// ["pic","pic"]要上传的文件的文本框的id
 			data:data,
 			dataType:"json",
 			success:function(data,status){
 				data=$.trim(data);
 				if(data=="0"){
 					alert("添加失败");	
 				}else{
					alert("添加成功");
					$("#add_modal").modal('hide');
					$("#examInfoTable").bootstrapTable('refresh', {url: '../examination.action?op=all'});					
 				}
 			},
 			error:function(data,status,e){
 				alert(e);
 			}
 		});
	}
	$("#edit_modal").on("show.bs.modal",function(e){
		var rows = $("#examInfoTable").bootstrapTable('getSelections')[0];
		if(rows.length==0){
			return;
		}
		$("#ename2").val(rows.ename);
		$("#estart2").val(rows.estart);
		$("#eend2").val(rows.eend);
		$("#emaxnum2").val(rows.emaxnum);
		if( rows.epic=="" ){
			$("#showpic2").html("<img src='/image/zanwu.jpg' width='100px' height='100px' />");
		}else{
			$("#showpic2").html("<img src='../"+rows.epic+"' width='100px' height='100px' />");
		}
	});
	function editExam(){
		var rows = $("#examInfoTable").bootstrapTable('getSelections');
		if(rows.length==0){
			return;
		}
		$("#edit_modal").modal('show');
	}
	function confirmEdit(){
		var emaxnum = $("#emaxnum2").val();
		if(emaxnum==""){
			return;
		}
		var rows = $("#examInfoTable").bootstrapTable('getSelections')[0];
		var ename = $("#ename2").val();
		var estart = $("#estart2").val();
		var eend = $("#eend2").val();
		var eid = rows.eid;
		data={ename:ename,estart:estart,eend:eend,emaxnum:emaxnum,eid:eid};
		
		$.ajaxFileUpload({
 			url:"/modExam.action",
 			secureuri:false,
 			fileElementId:"epic2",// ["pic","pic"]要上传的文件的文本框的id
 			data:data,
 			dataType:"json",
 			success:function(data,status){
 				data=$.trim(data);
 				if(data=="0"){
 					alert("修改失败");
 				}else{
 					alert("修改成功");
 					$("#examInfoTable").bootstrapTable('refresh', {url: '/examination.action?op=all'});
 					$("#edit_modal").modal("hide");
 				}
 			},
 			error:function(data,status,e){
 				alert(e);
 			}
 		});
	}
	function delExam(){
		var rows = $("#examInfoTable").bootstrapTable('getSelections');
		if(rows.length==0){
			return;
		}
		var eids="";
		for(var i=0;i<rows.length-1;i++){
			eids+=rows[i].eid+",";
		}
		eids+=rows[i].eid;
		console.info(eids);
		$.post("/examination.action",{op:"del",eids:eids},function(data){
			if(data>0){
                alert("删除成功");
                $("#examInfoTable").bootstrapTable('refresh', {url: '/examination.action?op=all'});
			}else{
                alert("删除失败");
			}
		});
	}
	//在表格中显示图片
	function formatPic(value,row,index){//value为字段值，row为此行所代表的对象，index为行号
		var picStr="";
		if(value!=""){
			picStr+="<img src='"+value+"' width='50px' height='50px' />";//FIXME 待上传后再来改
		}else{
			picStr+="<img src='/image/zanwu.jpg' width='50px' height='50px' />";
		}
		return picStr;
	};
		function formatStatus(value,row,index){
		if(value==0){
			return "否";
		}else{
			return "是";
		}
	};
	function formatMax(value,row,index){
		if(value==""||value==null){
			return "无限制";
		}else{
			return value;
		}
	};

</script>
